<!-- 商品评价组件 -->
<template>
  <div>
    <div v-if="evaluation" class="evaluation">
      <div class="top">
        <span class="top-num">买家评价 {{ evaluation.num }}</span>
        <img
          class="top-icon"
          src="~assets/img/common/gt.svg"
          alt=""
          width="14px"
        />
      </div>
      <div>
        <ul class="tags">
          <li class="tag" v-for="(item, index) in evaluation.tags" :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="evaluation-content">
        <div class="user">
          <div class="user-head-img">
            <img :src="evaluation.list[0].headImg" alt="头像不见了" />
          </div>
          <div class="user-nickname">{{ evaluation.list[0].nickname }}</div>
        </div>
        <div class="content">{{ evaluation.list[0].content }}</div>
        <div class="date">{{ showDate }}</div>
      </div>
    </div>
    <div v-else></div>
  </div>
</template>

<script>
import { formatDate } from "common/utils.js";
export default {
  name: "",
  props: {
    evaluation: {
      type: Object,
      default() {
        return {
          num: 33,
          tags: [
            "有图片 (294)",
            "质量好 (411)",
            "没有色差 (410)",
            "性价比高 (406)",
            "材质不错 (388)",
            "与描述一致 (386)"
          ],
          list: [
            {
              headImg:
                "https://s5.mogucdn.com/p1/160105/idid_ifrtcnbzgbswgntfguzdambqhayde_160x160.jpg",
              nickname: "小朋友",
              content: "质量不错,非常good",
              imgas: [],
              date: "1607769330318"
            }
          ]
        };
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    showDate() {
      return formatDate(
        new Date(this.evaluation.list[0].date * 1),
        "yyyy-MM-dd"
      );
    }
  },
  components: {}
};
</script>

<style scoped>
.evaluation {
  background: #fff;
  padding: 10px;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top .top-num {
  font-size: 14px;
  color: #999;
}
.tags {
  list-style: none;
  margin: 8px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tags .tag {
  font-size: 14px;
  margin: 4px;
  padding: 4px;
  border-radius: 4px;
  color: var(--color-high-text);
  background-color: #ffe8ee;
}
.evaluation-content .user {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.evaluation-content .user-head-img img {
  border-radius: 100%;
  border: 1px solid rgba(3, 3, 3, 0.1);
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.evaluation-content .content {
  font-size: 14px;
  padding: 10px 0;
}
.evaluation-content .date {
  font-size: 12px;
  color: #999;
}
</style>
